<template>
	<div class="becomeMatchmaker">
		<main>
			<header>
				<img :src="imgUrl + state.matchmaker_pic" />
			</header>
			<div class="info">
				<div class="title">红娘权益</div>
				<p style="font-size: 18px;" v-html="state.matchmaker_introduce"></p>
			</div>
		</main>


		<div class="bottom_btn">
      <div class="buy_now">
        <div class="price">
          价格: <span>￥</span><span style="font-size: 20px; font-weight: bold">{{ state.matchmaker_auth_fee }}</span>
           <div class="agreement_btn">
             <van-checkbox v-model="state.agreement_btn"></van-checkbox>
             <div>
               <span style="margin-left: 5px;color: #F74690;font-size: 12px;">我已阅读并同意</span>
               <span @click="navigationTo('agreement','marriage_agreement')" style="color: #F74690;font-size: 12px;">《婚介协议》</span>
             </div>
          </div>
        </div>
        <van-button size="large" v-debounce="buyNow">立即购买</van-button>
      </div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useMainStore } from '@/store/index';
import { globalConfigValue, wxRedMotherPay } from '@/api/common';
import { createRedMotherAuthOrder } from '@/api/index';
import wxApiReady from '@/hooks/wxApiReady';
import { Toast,Checkbox } from 'vant';
import wx from 'weixin-jsapi';
import {useRoute, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
const imgUrl = import.meta.env.VITE_IMG_URL;
const mainStore = useMainStore();
const state = reactive({
  agreement_btn:0,
	matchmaker_introduce: '',
	matchmaker_pic: '',
	matchmaker_auth_fee: ''
});

onMounted(() => {
	getGlobalConfigValue();
});

// 导航跳转
const navigationTo = (name: string, type?: string): void => {
  router.push({ name , query: { type }});
};

const buyNow = async () => {
  if (state.agreement_btn == 0) return Toast('请阅读并勾选婚介协议');
	const res = await createRedMotherAuthOrder(mainStore.user_id, state.matchmaker_auth_fee);
	const oid: number = res.data;
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
  });
	const params: any = await wxRedMotherPay(oid);
	wxApiReady(['chooseWXPay'])
		.then((res) => {
			wx.chooseWXPay({
				timestamp: params.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
				nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
				package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
				signType: params.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
				paySign: params.paySign, // 支付签名
				success: async (result: object) => {
					// 支付成功后的回调函数
					console.log(result);
					Toast.success('支付成功');
          setTimeout(() => {
            navigationTo('index');
          }, 2000);
				}
			});
		})
		.catch((err) => console.log(err));
};

const getGlobalConfigValue = () => {
	globalConfigValue('matchmaker_auth_introduce').then((res: any) => {
		state.matchmaker_introduce = res.data.item_value;
	});
	globalConfigValue('matchmaker_pic').then((res: any) => {
		state.matchmaker_pic = res.data.item_value;
	});
	globalConfigValue('matchmaker_auth_fee').then((res: any) => {
		state.matchmaker_auth_fee = res.data.item_value;
	});
};
</script>

<style lang="scss" scoped>
:deep(.van-checkbox) {
  .van-checkbox__icon {
    font-size: 13px;
  }
  .van-checkbox__icon--checked .van-icon {
    background-color: #F74690;
    border-color: #F74690;
  }
}
.becomeMatchmaker {
	main {
		padding: 15px;
    padding-bottom: 50px;
		header {
			margin-bottom: 10px;
			img {
				width: 100%;
				//height: 150px;
				object-fit: cover;
			}
		}
		.info {
			margin-bottom: 55px;

			.title {
				margin-bottom: 5px;
				font-size: 16px;
				font-weight: bold;
			}

			p {
				color: #333333;
				text-align: justify;

				font-size: 15px;
				font-weight: 400;

				line-height: 28px;
			}
		}
	}
	.buy_now {
		@include flx-justify-between;
    position: fixed;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom);
    background: white;
    height: 55px;
    box-shadow: 0px -4px 16px 0px rgba(156, 156, 156, 0.23);
		div.price {
			width: 52%;
			box-sizing: border-box;
			padding-left: 15px;
			font-size: 14px;
			span {
				color: #ea0a63;
			}
      .agreement_btn {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        margin-top: 6px;
      }
		}
		button {
			flex: 1;
			height: 100%;
			color: white;
			font-size: 17px;
			font-weight: 400;
			background: linear-gradient(86deg, #f53d7d, #fb56b3);
		}
	}
}
</style>
